<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>移动端布局案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      /*
        实现REM响应式布局开发的步骤：
          @1 找参照的比例(例如设计稿的比例, 一般是750px),在这个比例下给html fontSize属性设置一个初始值

            html {
                font-size:100px;
                // 在750px设计稿中，1REM = 100px ,为了好计算而设计100px
                // 未来我们需要把从设计稿中测量的尺寸 （px单位） 转换为REM单位去设置样式
            }
            
         @2 我们需要根据当前设备的宽度,计算相当于设计稿750的尺寸来讲，缩放的比例：从而让REM的转换比例,也跟着缩放
            {REM 和 PX的换算比例一改，则所有之前以REM为单位的样式也会随之缩放}


         @3  我们一般还会页面设置最大宽度750px,超过这个宽度，不在让REM比例继续变大了: 内容居中，左右两边留白
      */

      html {
        font-size: 100px;
      }
      html,
      body {
        height: 100%;
        background-color: #ccc;
      }

      #root {
        margin: 0 auto;
        max-width: 750px;
      }

      .box {
        width: 3.28rem;
        height: 2.5rem;
        background: gold;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.16rem;
      }
    </style>
    <script>
      (function () {
        /* 计算当前设备下，REM 和 PX换算 比例 */
        const computed = () => {
          const html = document.documentElement;
          const clientWidth = html.clientWidth;
          const designWidth = 750;

          // 设置宽度大于750，不进行REM等比放大
          if (clientWidth >= 750) {
            html.style.fontSize = `100px`;
            return;
          }
          const fontSize = (clientWidth * 100) / designWidth;
          html.style.fontSize = `${fontSize}px`;
        };

        computed();

        window.addEventListener("resize", computed);
      })();
    </script>
  </head>
  <body>
    <div id="root">
      <div class="box">盒子</div>
    </div>
  </body>
</html>

<script>
  /**
   *  真实项目中，我们一般要基于lib-flexible 和 postcss-pxtorem 这两个插件来完成的
   *
   *  @1 lib-flexible 设置REM和PX单位换算比例的
   *   + 根据设备的宽度自动计算
   *   + 公式：html.style.fontSize =  = 设备的宽度/10 + 'px'
   *      + 750设计稿中，1RWM = 750/10 = 75px : 初始换算比例
   *      + 375设备上， 1REM = 375/10 = 37.5px
   *
   *
   *   @2 postcss-pxtorem 可以把我们写的PX单位，按照当时的换算比例自动转为REM，不需要我们自己计算了
   * 
   *   在.postcssrc.js 配置文件中进行配置
   *    module.exports = {
   *        plugins: {
   *           "postcss-pxtorem": {
   *                 rootValue: 75, // 基于lib-flexible,750设计稿,就会设置为1REM=75PX；此时在webpack编译的时候，我们也需要让px2rem插件，按照1REM=75PX，把我们测出来的并且编写的PX样式，自动转换为REM；
   *                 propList: ['*'] // 对所有文件中的样式都生效{AntdMobile组件库中的样式}
   *           }
   *         }
   *    }
   *
   *
   *
   */
</script>
